<template>
  <div class="role-priv-alloce-view">
    <div class="role-priv-alloce-left">
      <div class="role-priv-alloce-left-top">
        <div class="left-top-info">
          <h3>角色列表</h3>
        </div>
        <div class="left-top-seach">
          <el-input placeholder="请输入内容" v-model="rolePrivAlloceSeach" class="input-with-select">
            <el-button slot="append" @click="findRole">查询</el-button>
          </el-input>
        </div>
      </div>
      <div class="role-priv-alloce-left-bottom"
           v-loading="isLoading"
           element-loading-text="数据加载中"
           element-loading-spinner="el-icon-loading"
           element-loading-background="rgba(21, 29, 54, 0.8)"
      >
        <div class="role-priv-alloce-table">
          <el-table
            ref="rolePriv"
            :row-style="callbackRow"
            :data="tableData"
            height="100%"
            border
            style="width: 100%"
            highlight-current-row
            :header-cell-style="{background:'#eef1f6',color:'#606266'}"
            @row-click="rowClickUser"
          >
            <el-table-column
              align="center"
              :show-overflow-tooltip="true"
              prop="index"
              label="序号"
              width="80">
            </el-table-column>
            <el-table-column
              align="center"
              :show-overflow-tooltip="true"
              prop="name"
              label="角色名"
              width="160">
            </el-table-column>
            <el-table-column
              align="center"
              :show-overflow-tooltip="true"
              prop="desciption"
              label="角色描述"
            >
            </el-table-column>
          </el-table>
        </div>
        <div class="role-priv-alloce-paging">
          <el-pagination
            layout="total, sizes, prev, pager, next"
            background
            :page-size="pageSize"
            :total="total"
            :page-count="10"
            :page-sizes="[5, 10, 20, 40]"
            @current-change="changePage"
            @size-change="sizeChange"
          >
          </el-pagination>
        </div>
      </div>
    </div>
    <div class="role-priv-alloce-right">
      <div class="role-priv-alloce-right-top">
        <el-button type="primary" class="edit-button" @click="configMenuBtn" :disabled="isSelectRow">配置菜单
        </el-button>
      </div>
      <div class="role-priv-alloce-right-bottom">
        <el-tabs v-model="active" type="border-card" @tab-click="menuTabsClick">
          <el-tab-pane v-for="(item,index) in tabsList" :key="index" :label="item.datacode" :name="item.datavalue">
            <div class="menuContent">
              <el-scrollbar :native="false" tag="section" class="el-scroll">
                <el-tree :data="menudata" :props="defaultProps" :highlight-current="true"
                         @node-click="menuNodeClick"></el-tree>
              </el-scrollbar>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>

    </div>
    <el-dialog title="配置菜单" :visible="configMenu" width="30%" @close="configMenuClose" :close-on-click-modal="false">
      <el-tree
        :data="dataConfigTree"
        show-checkbox
        node-key="id"
        ref="tree"
        highlight-current
        :props="defaultProps"
        :check-strictly="strictly"
      >
      </el-tree>
      <div slot="footer" class="dialog-footer">
        <el-button @click="configMenuCancel">取 消</el-button>
        <el-button type="primary" @click="configMenuSure">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>

  export default {

    components: {
      // name
    },
    name: "rolePrivAlloceView",
    props: {
      isLoading: {
        type: Boolean,
        default: false
      },
      total: {
        type: Number,
        default: 0
      },
      pageSize: {
        type: Number,
        default: 10
      },
      tableData: {
        type: Array,
        default: []
      },
      outActive: {
        type: String,
        default: ""
      },
      tabsList: {
        type: Array,
        default: []
      },
      menudata: {
        type: Array,
        default: []
      },
      defaultProps: {
        type: Object,
        default: {}
      },
      isSelectRow: {
        type: Boolean,
        default: true
      },
      configMenu: {
        type: Boolean,
        default: false
      },
      dataConfigTree: {
        type: Array,
        default: []
      },
      strictly: {
        type: Boolean,
        default: true
      }
      // msg: String //  [name: typeof]
    },
    filters: {},
    computed: {
      active: {
        get: function () {
          return this.outActive;
        },
        set: function () {
        }
      }
    },
    watch: {},
    data() {
      return {
        rolePrivAlloceSeach: "",
        // tableH: 0
      }
    },
    created() {

    },
    mounted() {
      // this.$nextTick(() => {
      //   this.tableH = parseInt(this.$refs.rolePriv.fixedBodyHeight.height.replace("px", "")) / 12;
      // })
    },
    methods: {
      findRole() {
        this.$emit('findRole', this.rolePrivAlloceSeach);
      },
      changePage(page) {
        this.$emit('changePage', page);
      },
      sizeChange(num) {
        this.$emit('sizeChange', num);
      },
      rowClickUser(row, column, event) {
        this.$emit('rowClickUser', row, column, event);
      },
      menuTabsClick(e) {
        this.$emit('menuTabsClick', e);
      },
      menuNodeClick(nodeInfo) {
        this.$emit('menuNodeClick', nodeInfo);
      },
      configMenuClose() {
        this.$emit('configMenuClose')
      },
      configMenuCancel() {
        this.$emit('configMenuCancel')
      },
      configMenuSure() {
        this.$emit('configMenuSure')
      },
      configMenuBtn() {
        this.$emit('configMenuBtn');
      },
      callbackRow(row, index) {
        // console.log("this.tableH", this.tableH);
        // // return `height:${this.tableH}px`;
        // console.log("rowrow", row);
        // console.log("indexindex", index);
      }
    },
    destroyed() {

    }
  }
</script>

<style scoped lang="less">
  @import url("./rolePrivAlloce");
</style>
